<!-- 会员类型管理 -->
<template>
  <div class="page-container">
    <div class="table-page-search">
      <a-form>
        <a-form-item label="职务名称:">
          <a-input v-model="queryParam.keyWord" placeholder="搜索名称" allowClear />
        </a-form-item>
        <a-form-item label="是否收费:">
          <a-select v-model="queryParam.isPremium" allowClear placeholder="请选择">
            <a-select-option v-for="item in Dict.getLocal('yesOrNoDict')" :value="item.dictValue" :key="item.dictValue">
              {{ item.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否对外展示:">
          <a-select v-model="queryParam.isShow" allowClear placeholder="请选择">
            <a-select-option v-for="item in Dict.getLocal('yesOrNoDict')" :value="item.dictValue" :key="item.dictValue">
              {{ item.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态">
          <a-select v-model="queryParam.status" allowClear placeholder="请选择">
            <a-select-option v-for="item in Dict.getLocal('enabledDict')" :value="item.dictValue" :key="item.dictValue">
              {{ item.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <span class="search-submitButtons">
          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </span>
      </a-form>
    </div>
    <div class="table-operator disFlxJS">
      <div>
        <!-- <a-button type="primary" @click="handleOpenModal({}, 'add')">添加会员职务</a-button> -->
        <a-button type="primary" @click="handleOpenBatchModal">添加会员职务</a-button>
      </div>
      <CustomTable :name="$route.name + '_' + 'Post1'" :columns="columns" :newColumns="newColumns" />
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="newColumns"
      :data="loadData"
      :rowSelection="null"
      :rangPicker="range"
    >
      <!-- 序号 -->
      <span slot="serial" slot-scope="text, record, index">
        {{ (pagination.current - 1) * pagination.pageSize + parseInt(index) + 1 }}
      </span>

      <!-- 是否收费 -->
      <span slot="isPremium" slot-scope="text">
        {{ text === 1 ? '是' : '否' }}
      </span>

      <!-- 周期 -->
      <span slot="allottedTime" slot-scope="text"> {{ text }}月 </span>

      <!-- 是否开放申请 -->
      <span slot="isShow" slot-scope="text, record">
        <a-switch v-if="record.nonmember === 0" :checked="record.isShow === 1" @change="onChangeStatus(record)" />
      </span>
      <!-- 操作 -->
      <span slot="action" slot-scope="text, record">
        <template>
          <a-button
            v-for="item in _btnList(record)"
            :key="item.text"
            type="primary"
            ghost
            size="small"
            class="_mr-5"
            @click="item.fn"
          >
            {{ item.text }}
          </a-button>
        </template>
      </span>
    </s-table>
    <index-form ref="indexForm" postType="first" @add="$refs.table.refresh(true)" @upd="$refs.table.refresh()" />

    <treeTransfer ref="treeTransferRef" :api="getMemberLevelCategoryTree" title="会员职务" @success="handleSuccess"></treeTransfer>
  </div>
</template>

<script>
import { STable } from '@/components'
import CustomTable from '@/components/Cuscolumn'
import indexForm from './indexForm'

import { getListPage, typeDel, typeShow } from '@/api/member/memberType'
import treeTransfer from '@/views/member/components/treeTransfer/index.vue'
import { getMemberLevelCategoryTree, addMemberLevelCategory } from '@/api/member/memberConfig'
export default {
  components: {
    STable,
    indexForm,
    CustomTable,
    treeTransfer
  },
  data() {
    return {
      visible: false,
      pagination: {
        current: 1,
        pageSize: 10
      },
      queryParam: {
        name: undefined,
        isPremium: undefined,
        isShow: undefined,
        status: undefined
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      columns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' },
          width: '80px'
        },
        {
          title: '会员职务',
          dataIndex: 'name',
          ellipsis: true
        },
        {
          title: '是否收费',
          dataIndex: 'isPremium',
          ellipsis: true,
          scopedSlots: { customRender: 'isPremium' }
        },
        {
          title: '费用',
          dataIndex: 'membershipFees'
        },
        {
          title: '周期',
          dataIndex: 'allottedTime',
          ellipsis: true,
          scopedSlots: { customRender: 'allottedTime' }
        },
        {
          title: '是否开放申请',
          dataIndex: 'isShow',
          scopedSlots: { customRender: 'isShow' }
        },
        {
          title: '排序',
          dataIndex: 'sort',
          width: '200px',
          ellipsis: true
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: '200px',
          ellipsis: true
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          fixed: 'right',
          scopedSlots: { customRender: 'action' }
        }
      ],
      range: null,
      pageNum: 1,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        var params = {
          current: parameter.pageNum,
          size: parameter.pageSize
        }
        this.listLoading = true
        return getListPage(Object.assign(params, this.queryParam))
          .then(res => {
            this.listLoading = false
            if (res.code === 0) {
              this.pageNum = parameter.pageNum
              this.pageSize = parameter.pageSize
              return res
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            this.listLoading = false
            this.$message.error(err.msg)
          })
      }
    }
  },
  computed: {
    newColumns() {
      const currentColumns = this.$store.state.user.customTable
      if (currentColumns && currentColumns[this.$route.name + '_' + 'Post1']) {
        return this.$options
          .data()
          .columns.filter(v => {
            const _items = currentColumns[this.$route.name + '_' + 'Post1'].find(
              item => item === v.title || item.title === v.title
            )
            if (_items) return Object.assign(v, _items)
          })
          .sort((a, b) => {
            return a.tableSort - b.tableSort
          })
      } else {
        return this.columns
      }
    }
  },
  methods: {
    getMemberLevelCategoryTree,
    handleAddCategory() {
      this.$refs.treeTransferRef.openModal()
    },
    async handleSuccess(checkedKeys) {
      await addMemberLevelCategory(checkedKeys)
      this.$message.success(`添加成功`)
      this.$refs.treeTransferRef.closeModal()
      this.handleReload()
    },
    handleReload() {
      this.$refs.table.refresh()
    },
    handleReset() {
      Object.keys(this.queryParam).forEach(k => {
        this.queryParam[k] = undefined
      })
      this.$refs.table.refresh(true)
    },
    handleOpenModal(record, type) {
      this.$refs.indexForm.openModal({
        data: record,
        type
      })
    },
    // 删除
    handleDel(ids) {
      var _this = this
      this.$confirm({
        title: '删除?',
        content: '是否确定删除该会员类型?',
        onOk() {
          typeDel({ ids: ids.join(',') }).then(res => {
            if (res.code === 0) {
              _this.$message.success(`删除成功`)
              _this.handleReload()
            } else {
              _this.$message.error(res.msg)
            }
          })
        },
        onCancel() {}
      })
    },
    onChangeStatus(record) {
      record.status = record.isShow === 0 ? 1 : 0
      typeShow(record).then(res => {
        if (res.code === 0) {
          this.$message.success(res.msg, 1)
          this.$refs.table.refresh()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    _btnList(record) {
      let oldList = [
        {
          show: true,
          text: '修改',
          fn: () => this.handleOpenModal(record, 'edit')
        },
        {
          show: record.nonmember === 0,
          text: '删除',
          fn: () => this.handleDel([record.id])
        }
      ]
      return oldList.filter(v => v.show)
    },
    handleOpenBatchModal() {
      this.$refs.treeTransferRef.openModal()
    }
  }
}
</script>
<style scoped lang="less"></style>
